<template>
    <div class="min">
        <navTitle title="营销活动列表"></navTitle>
        <Serch :array="array" @searchValues="searchValues"></Serch>
        <div class="data-list">
            <div class="left">
                <span><el-icon><Tickets /></el-icon></span>
                <span>数据列表</span>
            </div>
            <div>
                <button @click="goInToMsgs">秒杀时间段列表</button>
                <button @click="changeShow">添加活动</button>
            </div>
        </div>

        <StateList v-model:isShow="isShow" v-model:state="state" :seatch-val="serchVal" ></StateList>
        
        <AddActive v-model:isShow="isShow" v-model:state="state"></AddActive>
    </div>
</template>

<script lang="ts" setup>
import navTitle from '@/components/_s_yingxiao/_s_NavTitle.vue'
import Serch from '@/components/_s_yingxiao/_s_Serch.vue'
import StateList from '@/components/_s_yingxiao/_s_StateList.vue'
import AddActive from '@/components/_s_yingxiao/_s_AddActive.vue'
import { useRouter } from 'vue-router'
import { ref ,reactive } from 'vue'
const router = useRouter()
let isShow = ref(false) // 控制编辑的内容是否显示
let state = reactive({}) // 存放部分传递而来的数据,可有可无

let changeShow=()=>{
    isShow.value = true
}
let array = [{
    title : '活动名称',
    placeholder : '活动名称',
    havelist : false
}]

 // 被搜索的内容
let serchVal = ref([])

// 子传父搜索内容
let searchValues = (e:Array<any>)=>{
    // e是搜索内容的数组
    serchVal.value = e
}

// 秒杀时间段列表
let goInToMsgs = ()=>{
    router.push('/sms/flashSession')
}
</script>
 
<style lang="scss" scoped>
.min {
    min-width: 1160px;
}
.data-list{
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px 0 #9d9d9d;
    margin-bottom: 20px;
    div {
        button {
            padding: 6px 10px;
            margin: 0 10px;
            color: #666;
            background-color: #fff;
            border: 1px solid #ccc;
            font-size: 12px;
            cursor: pointer; 
        }
    }
    .left {
        display: flex;
        align-items: center;
    }
}
</style>